<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/myCookie.js"></script>
    <script src="../js/register.js"></script>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../css/demo.css">
    <link rel="stylesheet" href="../css/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <div class="head"></div>

    <!-- 主体 -->
    <div class="main">
        <div class="title">
            <h1>新用户注册</h1>
        </div>
        <div class="form">
            <input type="text" placeholder="设置用户名,请设置3-6个字符" id="username">
            <p class="des1"></p>
            <input type="password" placeholder="设置6-10位，数字，字母，下划线组合" id="password">
            <p class="des2"></p>
            <input type="password" placeholder="请再次输入上面的密码" id="pwd">
            <p></p>
            <input type="text" placeholder="请输入下面的验证码" id="verificationCode">
            <p></p>
        </div>
        <div class="verificationCode"></div>
        <div class="text">验证码：</div>
        <button class="btn">立即注册</button>
    </div>

    <!-- 尾部 -->
    <div class="foot"></div>

    <script>
        // 获取元素
        let username = document.querySelector('#username')
        let password = document.querySelector('#password')
        let des1 = document.querySelector('.des1')
        let des2 = document.querySelector('.des2')
        let pwd = document.querySelector('#pwd')
        let inp = document.querySelector('#verificationCode')
        let verificationCode = document.querySelector('.verificationCode')
        let btn = document.querySelector('.btn')
        // console.log(username,password,pwd,inp,verificationCode,btn)

        // 用户名模块
        username.onblur = () => {
            if (username.value == '') {
                des1.innerHTML = '请输入用户名'
                des1.style.color = "red"
                return false
            }
            pAjax({
                url: '../api/register2.php',
                query: { username: username.value, pas: password.value }
            }).then((data) => {
                let res = JSON.parse(data)
                if (res.code == 404) {
                    des1.innerHTML = res.body.msg
                    des1.style.color = "red"
                } else if (res.code == 200) {
                    des1.innerHTML = res.body.msg
                    des1.style.color = "green"
                }
            })
        }
        // 密码模块
        let reg = /^\w{6,10}$/
        password.addEventListener('blur', () => {
            if (password.value == '') {
                password.nextElementSibling.innerHTML = '请输入密码'
                password.nextElementSibling.style.color = 'red'
            } else if (reg.test(password.value) == true) {
                password.nextElementSibling.innerHTML = '您输入的密码格式正确'
                password.nextElementSibling.style.color = 'green'
            } else {
                password.nextElementSibling.innerHTML = '您输入的密码格式不正确，请重新输入'
                password.nextElementSibling.style.color = 'red'
            }
        })

        pwd.addEventListener('blur', () => {
            if (pwd.value == '') {
                pwd.nextElementSibling.innerHTML = '请再次输入密码'
                pwd.nextElementSibling.style.color = 'red'
            } else if (pwd.value == password.value) {
                pwd.nextElementSibling.innerHTML = '密码一致'
                pwd.nextElementSibling.style.color = 'green'
            } else {
                pwd.nextElementSibling.innerHTML = '密码不一致，请重新输入'
                pwd.nextElementSibling.style.color = 'red'
            }

        })

        // 验证码验证模块
        inp.addEventListener('blur', () => {
            if (inp.value == verificationCode.innerHTML) {
                inp.nextElementSibling.innerHTML = '验证码正确'
                inp.nextElementSibling.style.color = 'green'
            } else {
                inp.nextElementSibling.innerHTML = '验证码不正确'
                fn(1111, 9999)
            }
        })
        function fn(min, max) {
            let timer = setTimeout(() => {
                let num = parseInt(Math.random() * (max - min + 1) + min)
                verificationCode.innerHTML = num
            })
        }
        fn(1111, 9999)

        // 注册成功，跳转
        btn.onclick = () => {
            if(username.value == ''){
                alert('请输入用户名')
                return false;
            }else if(password.value == ''){
                alert('请输入密码')
                return false;
            }else if(inp.value == ''){
                alert('请输入验证码')
                return false;
            }else if (confirm('注册成功，点击确定跳转') == true) {
                pAjax({
                    url: '../api/register.php',
                    query: { username: username.value, pas: password.value }
                })
                location.href = '../html/4-login.html'
            } else {
                return false;
            }
        }
    </script>
</body>

</html>